import privateSeaInterface from "/api/privateSea/privateSeaInterface";
import request from "/utils/request"
import { showToast } from "/utils/common";
import { validtatePhone } from "/utils/commonMethod"
Page({
  data: {
    form: { // form表单提交参数
      shopList: [], // 该商户下对应的分店list表
      contacts: "", // 商户联系人
      contactNumber: "", //kp联系电话
      remark: "", // 备注
      tags: [],// 
    },
    selectStoreNumber: 0,
    allStoreNumber: 0,
    labelEnume: ["意向客户", "无意向客户", "竟对跟进中", "断约客户", "合作即将到期"],
    isShowNewTag: true,// 是否展示 新增tag标签
    selectAll: false, //默认全选
    floorNumber: 1,
    stepsNumber: 3
  },
  onLoad(option) {
    if (option && option.merchantId) {
      dd.showLoading({
        content: "加载中...."
      })
      request({
        url: privateSeaInterface.getMerchantInfo,
        data: {
          id: option.merchantId
        },
        headers: {
          "Content-Type": "application/json"
        },
      }).then((res) => {
        if (res.success) {
          //处理tags标签回显 默认标签
          if (res.vo.tags === null) {
            res.vo.tags = [
              { name: "意向客户", checked: false, defaultLabel: true },
              { name: "无意向客户", checked: false, defaultLabel: true },
              { name: "竟对跟进中", checked: false, defaultLabel: true },
              { name: "断约客户", checked: false, defaultLabel: true },
              { name: "合作即将到期", checked: false, defaultLabel: true }
            ]
          } else {
            let arr = []
            let tagsArray = res.vo.tags.split("&&")
            // 有标签回显 选中
            tagsArray.map((item) => {
              item && arr.push({
                name: item,
                checked: true,
                defaultLabel: this.data.labelEnume.find((val) => val === item) ? true : false// 默认标签--不能删除-
              })
            })
            // 回显中没有的标签 ，需要默认展示的-标签-不选中
            this.data.labelEnume.forEach((item) => {
              if (!tagsArray.includes(item)) {
                arr.push({
                  name: item,
                  checked: false,
                  defaultLabel: true// 是否是默认标签 不能删除
                })
              }
            })
            res.vo.tags = arr;

          }
          res.vo && this.setData({
            form: { ...this.data.form, ...res.vo },
            selectAll: true
          })
          this.computedSelectStoreNumber()
          //设置默认值
          dd.hideLoading()
        }
      }).catch((err) => {
        dd.hideLoading()
        dd.alert({
          content: err
        })
      })

    }
  },
  onShow() {
    // 切换后台 到当前 初始化tag标签
    this.setData({
      isShowNewTag: true
    })
  },
  loadMore() {
    this.setData({
      floorNumber: 99
    })
  },
  fold() {
    this.setData({
      floorNumber: 1
    })
  },
  //1-实现动态添加和删除tag标签功能
  onBlur(e) { //添加
    if (e.detail.value) {
      if (e.detail.value.length > 6) {
        showToast({
          msg: "自定义标签长度不能超过6个字"
        })
        return
      }
      this.data.form.tags.push({
        name: e.detail.value,
        checked: false
      })
    } else {
      showToast({
        msg: "添加标签信息不能为空"
      })
      dd.hideKeyboard();
    }
    this.setData({
      "form.tags": this.data.form.tags,
      isShowNewTag: e.detail.value ? true : false
    })
  },
  // 监听键盘收起
  onKeyboardHide() {
    this.setData({
      isShowNewTag: true
    })
  },
  deleteTag(e) { //删除
    this.data.form.tags.splice(e.currentTarget.dataset.index, 1);
    this.setData({
      "form.tags": this.data.form.tags,
    })
  },
  // 1-是否选择当前tag
  clickTagItem(e) {
    let flag = false
    // //增加--- 判断当前选中标签是否超过四个-
    this.data.form.tags.forEach((item, index, arr) => {
      if (e.currentTarget.dataset.activeIndex === index) {
        if (item.checked == false && arr.filter((val) => val.checked === true).length > 3) {
          flag = true
        } else {
          item.checked = !item.checked
          flag = false
        }
      }
    })
    flag && showToast({
      msg: "注意:最多选中四个标签",
      duration: 1500
    })
    this.setData({
      "form.tags": this.data.form.tags
    })
  },
  addNewTag() {
    this.setData({
      isShowNewTag: false
    })
  },
  allCheckChange(e) {
    this.data.form.shopList.forEach((item) => {
      item.selectedFlag = e.detail.value
    })
    this.setData({
      selectAll: e.detail.value,
      "form.shopList": this.data.form.shopList
    })
    this.computedSelectStoreNumber()
  },
  // 2-是否勾选分店
  checkedValChange(e) {
    let index = e.currentTarget.dataset.index; // 当前操作的对象在数组中索引
    this.data.form.shopList[index].selectedFlag = e.detail.value;
    this.setData({
      "form.shopList": this.data.form.shopList, //更新视图
      selectAll: this.data.form.shopList.some((item) => item.selectedFlag === true)    // 反选
    })
    this.computedSelectStoreNumber()
  },
  // 计算当前选中分家店数
  computedSelectStoreNumber() {
    this.setData({
      selectStoreNumber: this.data.form.shopList.filter((item) => item.selectedFlag === true).length,
      allStoreNumber: this.data.form.shopList.length
    })
  },
  // 3 表单输入最新值-实现数据回显--
  onContactInput(e) {
    this.setData({
      "form.contacts": e.detail.value
    })
  },
  // 3
  oncontactNumberInput(e) {
    this.setData({
      "form.contactNumber": e.detail.value
    })
  },
  //3
  onRemarkInput(e) {
    this.setData({
      "form.remark": e.detail.value
    })
  },
  onSubmit(e) {
    Object.assign(this.data.form, e.detail.value);
    //0 -校验
    //所选门店至少为一个
    if (this.data.form.shopList.every((item) => item.selectedFlag == false)) {
      showToast({
        msg: "所选门店至少为一个"
      })
      return;
    }
    //手机号校验
    if (this.data.form.contactNumber && !validtatePhone(this.data.form.contactNumber)) {
      return
    }
    dd.showLoading({
      content: "加载中..."
    })
    // 1- 处理标签数据
    let arr = []
    let form = JSON.parse(JSON.stringify(this.data.form));
    form.tags.forEach((item) => {
      if (item.checked) {
        arr.push(item.name)
      }
    })
    form.tags = arr.join("&&");
    request({
      url: privateSeaInterface.updateMerchant,
      method: "post",
      headers: {
        "Content-Type": "application/json"
      },
      data: form
    }).then((res) => {
      if (res.success) {
        dd.alert({
          content: '更新成功！',
          success: () => {
            dd.navigateBack();
          },
        });
      }
    }).finally(() => {
      dd.hideLoading();
    })
  }
});
